import React, { Component } from 'react'
import { SearchBar } from 'antd-mobile';
import JdNav from "../Nav/JdNav"
import { gteGoodsList } from "../../api"
import "./SearchCenter.scss";
import { withRouter } from "react-router-dom"
class searchCenter extends Component {
    timeId = null;
    state = {
        //搜索到的商品数据
        GoodsList: [],
    }
    handleItemClick = (goods_id) => {
        this.props.history.push("GoodDetail/" + goods_id)
    }

    debounce = (fn, time) => {

    }
   
    
    valid = true;//标识上次事件是否已经完成
    //节流方式
    // throttle = (fn, time) => {
    //     if (this.valid) {
    //         //设置定义器
    //         this.valid = false;
    //         setTimeout(() => {
    //             fn.call(this); // 执行回调函数
    //             this.valid = true;
    //         }, this.timeout)
    //     }
    // }
    //防抖的写法
    debounce = (fn, time) => {
        if (this.timeId) {
            clearTimeout(this.timeId);
            this.timeId = null;
        }
        this.timeId = setTimeout(fn, time);
    }
    handleChange = (value) => {
        // this.throttle(async function () {
        //     console.log(value);
        //     let res = await gteGoodsList({
        //         query: value,
        //     })
        //     console.log(res);
        //     this.setState({
        //         GoodsList: res.message,
        //     })
        // }, 1000)
        // this.throttle(async () => {
        //     console.log(value);
        // }
        // )
        this.debounce(async () => {
            let res = await gteGoodsList({
                query:value
            });
            // console.log(res);
            this.setState({
                GoodsList:res.message,
            })
        }
        )
    }
   
    render() {
        return (
            <div className="jdSearchCenter">
                <JdNav title="搜索中心" left={true}></JdNav>
                <SearchBar
                    // cancelText 自定义文字
                    placeholder="搜索"
                    cancelText="搜索"
                    onChange={this.handleChange}
                />
                <div className="scList">
                    {this.state.GoodsList && this.state.GoodsList.map((v, i) => {
                        return (
                            <div key={v.goods_id} className="scListItem" onClick={this.handleItemClick.bind(this, v.goods_id)}>{v.goods_name}</div>
                        )
                    }
                    )}
                </div>
            </div>
        )
    }
}
export default withRouter(searchCenter);
